class Car{
//			1.构造函数
    constructor(){
        this.tBody = document.querySelector("tbody");
    }
//			2.从本地存储中拿到数据,准备在购物车页面显示
    getData(){
//          	2.1 立即拿到数据
        if(localStorage.getItem("goodsMsg")){
//              	2.2把其变为json对象格式,方便于调用其中的属性
            this.gm = JSON.parse(localStorage.getItem("goodsMsg"));
        }
        else{
            this.gm = [];
        }
        //3.准备渲染页面
        this.display();
    }
    display(){
//          	3.1 准备一个空字符串
        var str = "";
//          	3.2把数据填入字符串中,准备放到页面上
        for(var i=0;i<this.gm.length;i++){
            str += `<tr index="${this.gm[i].goodsId}">
                            <td><img src="${this.gm[i].msg.img}" alt=""></td>
                            <td>${this.gm[i].msg.name}</td>
                            <td>${this.gm[i].msg.price}</td>
                            <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                            <td>${ this.gm[i].msg.price * this.gm[i].num }</td>
                            <td class="delete">删除</td>
                        </tr>`;
        }
//          	3.3渲染	
        this.tBody.innerHTML = str;
    }
//             事件绑定
    addEvent(){
        var that = this;
//             4.删除功能
//             4.1因为我们一开始在html中并没有删除,所以需要用到事件委托
        this.tBody.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className == "delete" ){
                // 4.2先获取当前点击删除按钮的商品的id
                that.id = tar.parentNode.getAttribute("index");
//              		4.3删除对应DOM元素
                tar.parentNode.remove();
//                      4.5删除对应存储在本地的数据
                that.changeData(function(i){
                    that.gm.splice(i,1);
                });

            }
        }
//              5.总价跟着数量而改变
//              5.1首先也是通过事件委托拿到数量
        this.tBody.oninput = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "number"){
                //5.2.获取要修改数量的商品的id
                that.id = tar.parentNode.parentNode.getAttribute("index");
                // 5.3.执行修改本地存储中数据的功能
                that.changeData(function(i){
                    that.gm[i].num = tar.value;
                });
//                  5.4每次修改数量时,来计算总价
                tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML;
            }
        }
    }
    //          4.4通过点击获取的商品的id来找到本地存储中对应商品
    changeData(cb){
        // 根据点击的商品的id查找本地存储的数据中符合的商品数据
        for(var i=0;i<this.gm.length;i++){
            if(this.gm[i].goodsId === this.id){
                cb(i);
                break;
            }
        }
        // 剔除掉之后，得再存回去，否则仅仅是在内存中修改，没有修改本地存储
        localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
    }


}
//		4.先创建实例对象进行页面查看
var c = new Car();
c.getData();
c.addEvent();
